<!--
  ~ Copyright (c) 2019. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  ~ Morbi non lorem porttitor neque feugiat blandit. Ut vitae ipsum eget quam lacinia accumsan.
  ~ Etiam sed turpis ac ipsum condimentum fringilla. Maecenas magna.
  ~ Proin dapibus sapien vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget metus.
  ~ Vestibulum commodo. Ut rhoncus gravida arcu.
  -->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <title>Contests Background</title>
    <script language="JavaScript" th:src="@{/js/StatusInModal.js}"></script>
    <script>
        $(function () {
            $("body").on("click", "#plus-problem", function () {
                $(this).before("<div class=\"problem-input form-inline\">" +
                    "                id:<input type=\"text\" class=\"form-control plus-problems\">" +
                    "                alias:<input class=\"problem-name form-control\">" +
                    "                <span class=\"fa fa-minus-square remove-problem\" style=\"font-size: 1.5rem;color: red\"></span>" +
                    "            </div>");
            });
            $("body").on("click", ".remove-problem", function () {
                $(this).parent().remove();
            });
            $("body").on("change", ".plus-problems", function () {
                var obj = $(this);
                $.get({
                    url: "/oj/admin/contest/get-problem-name/" + obj.val(),
                    success: function (data) {
                        obj.siblings(".problem-name").val(data);
                    }
                });
            });
            $("#submit-contest").click(function () {
                var problems = [];
                $(".plus-problems").each(function () {
                    problems.push($(this).val() + "&" + $(this).siblings(".problem-name").val());
                });
                $.post({
                    url: "/oj/contest/background/edit/" + $("#id").val(),
                    data: {
                        title: $("#title").val(),
                        description: $("#description").val(),
                        privilege: $("#privilege").val(),
                        password: $("#password").val(),
                        startTime: $("#startTime").val(),
                        lastTime: $("#lastTime").val(),
                        pattern: $("#pattern").val(),
                        list: problems
                    },
                    success: function (data) {
                        alert(data);
                    }
                });
            });
        });
    </script>
    <script>
        function Rejudge() {
            if (confirm("Sure??Rejudge/Judge??")) {
                $.get({
                    url: "/oj/contest/rejudge/" + $("#id").val(),
                    success: function (res) {
                        alert(res);
                    }
                });
            }
        }
    </script>
</head>
<body>
<main class="container">
    <button class="btn btn-danger btn-sm">Rejudge/Judge</button>
    <form>

        <div class="form-inline">
            ID: <input id="id" readonly th:value="${contest.id}" type="text"> Title:<input class="form-control"
                                                                                           id="title" name="title"
                                                                                           th:value="${contest.title}"
                                                                                           type="text">
        </div>
        <div class="form-group">
            Description:<input class="form-control" id="description" name="description"
                               th:value="${contest.description}"
                               type="text">
        </div>
        <div class="form-group">
            Privilege: <select class="form-control" id="privilege" name="privilege" th:value="${contest.privilege}">
            <option value="public">Public</option>
            <option value="private">Private</option>
        </select>
        </div>
        <div class="form-group">
            Pattern: <select class="form-control" id="pattern" name="pattern" th:value="${contest.pattern}">
            <option value="acm">ACM</option>
            <option value="oi">OI</option>
        </select>
        </div>
        <div class="form-group">
            Password:(Private 填写)<input class="form-control" id="password" name="password"
                                        th:value="${contest.password}"
                                        type="text">
        </div>
        <div class="form-group">
            Start Time: <input class="form-control form-datetime" data-date-format="yyyy-mm-dd hh:ii" id="startTime"
                               name="startTime" type="text">
        </div>
        <div class="form-group">
            Length: <input class="form-control " id="lastTime" name="lastTime" th:value="${contest.length}"
                           type="time">
        </div>
        <div class="form-group">
            Problems :
            <div class="problem-input form-inline" th:each="problem:${contest.problems}">
                id:<input class="form-control plus-problems" type="text" th:value="${problem.problem.id}">
                alias:<input class="problem-name form-control" type="text" th:value="${problem.tempTitle}">
                <span class="fa fa-minus-square remove-problem" style="font-size: 1.5rem;color: red"></span>
            </div>
            <span class="fa fa-plus-square" id="plus-problem" style="color: green;font-size: 1.5rem;"></span>
        </div>
        <a class="btn btn-primary btn-lg" id="submit-contest">Submit</a>
    </form>
</main>
<footer th:replace="~{fragment/footer :: footer}"></footer>
</body>
</html>